html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    /* background-image: url("https://rank.xiaci.cn/grade/bg.png"); */
    /* background-size: 100% 100%; */
    background: linear-gradient(90deg, #FACCDE, #ddf7fc);
}

#title-img {
    max-width: 80%;
    display: block;
    margin: 0 auto;
}

#main {
    max-width: 38rem;
    margin: 0 auto;
    overflow-x: auto;
}

#menu {
    padding: 0.4rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#menu>* {
    display: block;
    background-color: #96d5ff;
    border-radius: 1rem;
    font-size: 1rem;
    font-weight: normal;
    color: black;
    text-decoration: none;
    padding: 0.3rem 0.6rem;
    border: 1px solid white;
}

#rank-table-wrap {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: min-content;
    padding: 0.4rem 0.8rem;
    border-radius: 1.6rem;
    background: linear-gradient(100deg, #f7fcfe 30%, #fdfdfd);
    box-shadow: 0 0 3px 5px #e0e8fa;
}

#rank-table {
    width: 100%;
    min-width: min-content;
    border-collapse: collapse;
    border-spacing: 0;
}

#rank-table tr {
    width: 100%;
}

#rank-table tbody tr:hover {
    background: #d2dadd;
}

#rank-table th {
    border-bottom: 2px solid #e1e8fa;
    color: #797c94;
    font-weight: normal;
}

#rank-table td {
    border-bottom: 1px solid #e1e8fa;
    text-align: center;
}


#rank-table .rank {
    font-size: 1.6rem;
    color: #6b6355;
}

/* 选手信息 */
.participant-info-container {
    display: flex;
    flex-direction: row;
}

.participant-info-container .avatar-wrap {
    position: relative;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0.2rem;
}

.participant-info-container .avatar-wrap .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
} 

.participant-info-container .name-wrap {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.participant-info-container .name-wrap .uid {
    font-size: 0.8rem;
    color: #797c94;
}

.participant-info-container .name-wrap .uid::before {
    content: "UID:";
}

#rank-table tbody tr:nth-of-type(1) .avatar-wrap,
#rank-table tbody tr:nth-of-type(2) .avatar-wrap,
#rank-table tbody tr:nth-of-type(3) .avatar-wrap {
    margin-top: 0.8rem;
    margin-right: 1rem;

}

#rank-table tbody tr:nth-of-type(1) .avatar-wrap::after,
#rank-table tbody tr:nth-of-type(2) .avatar-wrap::after,
#rank-table tbody tr:nth-of-type(3) .avatar-wrap::after {
    content: "";
    display: block;
    position: absolute;
    top: -0.8rem;
    left: -0.5rem;
    width: calc(100% + 1rem);
    height: calc(100% + 1rem);
    background-size: contain;
}

#rank-table tbody tr:nth-of-type(1) .avatar-wrap::after {
    background-image: url("https://rank.xiaci.cn/grade/ph1.png");
}

#rank-table tbody tr:nth-of-type(2) .avatar-wrap::after {
    background-image: url("https://rank.xiaci.cn/grade/ph2.png");
}

#rank-table tbody tr:nth-of-type(3) .avatar-wrap::after {
    background-image: url("https://rank.xiaci.cn/grade/ph3.png");
}

#rank-table .qizhen::before,
#rank-table .shanhu::before,
#rank-table .jinguan::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    background-image: url("https://rank.xiaci.cn/grade/x1.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* 奇珍 */
#rank-table .qizhen::before {
    background-image: url("https://rank.xiaci.cn/grade/x1.png");
}

/* 珊瑚 */
#rank-table .shanhu::before {
    background-image: url("https://rank.xiaci.cn/grade/x2.png");
}

/* 金冠 */
#rank-table .jinguan::before {
    background-image: url("https://rank.xiaci.cn/grade/x3.png");
}
